import * as d3 from "d3";
import emitter from "../utils/eventbus";
import d3DrawStore from "../store/modules/d3Draw";
/**
 * 画布初始化
 * @param $
 * @param width 画布宽度
 * @param height 画布长度
 * @returns dom
 */
export function initChart($: any, width: number, height: number) {
  $.attr("width", width);
  $.attr("height", height);
  return $;
}
/**
 * 新增坐标尺
 * @param $
 * @param type 坐标轴类型 X | Y
 * @param startX 坐标轴 X 偏移向量
 * @param startY 坐标轴 Y 偏移向量
 * @param direction 方向
 * @param len 坐标轴长度
 */
export function appendAxis($: any, type: string = "y", direction: string = "right", len: number = 0, startX: number = 0, startY: number = 0) {
  // 获取画布ID
  let height: number = $.attr("height");
  let width: number = $.attr("width");
  let id: string = $.attr("id");
  if (len === 0) {
    if (type === "x") {
      len = width;
    } else if (type === "y") {
      len = height;
    }
  }
  //@TODO 全局比例尺缩放 pinia实现
 // var scale = d3.scaleLinear().domain([0, len*10]).range([0, len]);
  var scale = d3.scaleLinear().domain([0, len]).range([0, height]);
  d3DrawStore().setScale(scale)
  // 如果是 X 坐标轴
  var axis: any = null;
  if (type === "x") {
    // 限制 direction 只能为 top bottom
    if (direction === "top") {
      axis = d3.axisTop(scale);
    } else if (direction === "bottom") {
      axis = d3.axisBottom(scale).tickFormat(function(d) {
        if (d === 0) {
          return null; // 如果是开头的数字，返回null
        } else {
          return d; // 否则返回数字
        }
      });;;
    }
  } else if (type === "y") {
    // 限制 direction 只能为 left right
    if (direction === "left") {
      axis = d3.axisLeft(scale);
    } else if (direction === "right") {
      axis = d3.axisRight(scale).tickFormat(function(d) {
        if (d === 0) {
          return null; // 如果是开头的数字，返回null
        } else {
          //return d
          return d ; // 否则返回数字
        }
      });;
    }
  } else {
    console.warn("type参数可选[x,y]");
  }
  // @TODO translate 根据 startX startY 调整
  let dom = $.append("g")
    .attr("class", type + "-axis")
    .attr("transform", `translate(${startX}, ${startY})`)
    .call(axis);
  // hook事件监听
  //console.log(type);
  emitter.on(id, (transform: any) => {
    if (type === "y") {
     // console.log("Y缩放");
    // dom.attr("transform", `translate(${startX}, ${startY}) scale(${transform.k})`)
      dom.call(axis.scale(transform.rescaleY(scale)));
    } else if (type === "x") {
     // console.log("X缩放");
    // dom.attr("transform", `translate(${startX}, ${startY}) scale(${transform.k})`)
      dom.call(axis.scale(transform.rescaleX(scale)));
    }
  });

  return axis;
  // $.append("g").attr("class", "y-axis").attr("transform", "translate(200, 100)").call(axis);
}
/**
 * 新增网格线
 * @param $ dom
 * @param gridSize 网格线宽
 */
export function appendGrid($: any, gridSize: number = 20) {
  let height: number = $.attr("height");
  let width: number = $.attr("width");
  let id: string = $.attr("id");
  // // 绘制横向网格线
  $.selectAll("line.horizontalGrid")
    .data(d3.range(0, height, gridSize))
    .enter()
    .append("line")
    .attr("class", "horizontalGrid")
    .attr("x1", 0)
    .attr("y1", (d) => d)
    .attr("x2", width)
    .attr("y2", (d) => d)
    .style("stroke", "#ddd")
    .style("opacity", 0.06);
  // // 绘制纵向网格线
  $.selectAll("line.verticalGrid")
    .data(d3.range(0, width, gridSize))
    .enter()
    .append("line")
    .attr("class", "verticalGrid")
    .attr("x1", (d) => d)
    .attr("y1", 0)
    .attr("x2", (d) => d)
    .attr("y2", height)
    .style("stroke", "#ddd")
    .style("opacity", 0.06);
  // hook事件监听
  emitter.on(id, (transform: any) => {
    //console.log(transform)
    // 根据缩放比例和偏移量更新网格线的位置和大小
    $.selectAll("line.horizontalGrid")
      .attr("y1", (d) => transform.applyY(d))
      .attr("y2", (d) => transform.applyY(d))
      .style("opacity", 0.06 * transform.k);
    $.selectAll("line.verticalGrid")
      .attr("x1", (d) => transform.applyX(d))
      .attr("x2", (d) => transform.applyX(d))
      .style("opacity", 0.06 * transform.k);
  });
}

/**
 * 新增缩放
 * @param $ dom
 * @param zoomMin 最小缩放
 * @param zoomMax 最大缩放
 */
export function appendZoom($: any, zoomMin: number = 1, zoomMax: number = 10): any {
  let width = $.attr("width");
  let height = $.attr("height");
  let id = $.attr("id");
  const zoom = d3
    .zoom()
    .scaleExtent([zoomMin, zoomMax]) // 缩放范围
    .translateExtent([
      [0, 0],
      [width, height],
    ])
    .on("zoom", (event) => {
      var transform = event.transform;
      // onZoom($,transform);
      // 事件总线通知 ID 绑定画布的缩放
      emitter.emit(id, transform);
    }); // 绑定缩放事件
  $.call(zoom);

  return zoom;
}
